<template>
  <div class="home" :style="cssWidth < 1920 ? 'height:' + (cssHeight-50) + 'px;' : 'height:100%'">
    <div class="box-top">
      <img src="../assets/images/icon-yun.png" alt="" />
      <div>欢迎光临</div>
    </div>
    <div class="box-bottom">
      <div class="box-left">
        <div class="box-row">
<!--          <div class="box box-deduction">-->
<!--            <div class="title">-->
<!--              <span class="name">扣费统计</span>-->
<!--            </div>-->
<!--            <div class="deduction-min">-->
<!--              <img class="icon" src="../assets/images/icon-deduction.png" alt="" />-->
<!--              <div class="deduction-right">-->
<!--                <div class="deduction-top-min">-->
<!--                  <div style="color:#666;">累计扣费</div>-->
<!--                  <div style="color: #262626;">{{statisticalData.totalIncome / 100 || '0.00'}}</div>-->
<!--                </div>-->
<!--                <div class="see-deduction-min" @click="handleCapitalRecord">查看更多</div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
          <div class="box box-middle">
<!--            <div class="top">-->
<!--              <div class="title">-->
<!--                <span class="name">通道预存</span>-->
<!--              </div>-->
<!--              <div style="color: #666;font-size: 8px;margin-top:18px;">当前余额/元</div>-->
<!--              <div style="color: #252525;display: inline-block;position: relative;font-size: 30px;">{{statisticalData.balance}}</div>-->
<!--            </div>-->
<!--            <div class="line"></div>-->
            <div class="bottom">
              <div class="title">
                <span class="name">总流水</span>
              </div>
              <div style="color: #666;font-size: 8px;margin-top:18px;">237658/笔</div>
              <div style="color: #252525;display: inline-block;position: relative;font-size: 30px;">{{statisticalData.totalIncome}}</div>
            </div>
          </div>
          <div class="box box-today">
            <div class="title">
              <span class="name">今日流水</span>
            </div>
            <div style="color: #333333;margin-top:18px;display: inline-block;position: relative;font-size: 20px;">
              {{statisticalData.todayIncome}}
              <!-- <span style="position: absolute;right:0;top:-16px;color: #00B36F;font-size: 8px;">+4.12%</span> -->
            </div>
            <div style="color: #ADABAB;font-size: 8px;">{{statisticalData.todayTradeNum}}/笔</div>
            <div :class="statisticalData.todaySuccessRate > 60 ? 'progre-min' : 'progre-yes-min'">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">支付宝：{{statisticalData.todayAliPaySuccessRate}}<br/>微信：{{statisticalData.todayWxPaySuccessRate}}</div>
                <div :class="statisticalData.todaySuccessRate > 60 ? 'progre' : 'progre-yes'">
                  <el-progress type="circle" :percentage="statisticalData.todaySuccessRate" :width="100" :color="statisticalData.todaySuccessRate > 60 ?
                      '#00B36B' : 'rgba(255, 130, 0, 1)'">
                  </el-progress>
                </div>
              </el-tooltip>
            </div>
          </div>
          <div class="box box-yesterday">
            <div class="title">
              <span class="name">昨日流水</span>
            </div>
            <div style="color: #333333;margin-top:18px;display: inline-block;position: relative;font-size: 20px;">
              {{statisticalData.yesterdayIncome}}
              <!-- <span style="position: absolute;right:0;top:-16px;color: #FD2A2A;font-size: 8px;">+4.12%</span> -->
            </div>
            <div style="color: #ADABAB;font-size: 8px;">{{statisticalData.yesterdayTradeNum}}/笔</div>
            <div :class="statisticalData.yesterdaySuccessRate > 60 ? 'progre-min' : 'progre-yes-min'">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">支付宝：{{statisticalData.yesterdayAliPaySuccessRate}}<br/>微信：{{statisticalData.yesterdayWxPaySuccessRate}}</div>
                <div :class="statisticalData.yesterdaySuccessRate > 60 ? 'progre' : 'progre-yes'">
                  <el-progress type="circle" :percentage="statisticalData.yesterdaySuccessRate" :width="100" :color="statisticalData.yesterdaySuccessRate > 60 ?
                      '#00B36B' : 'rgba(255, 130, 0, 1)'">
                  </el-progress>
                </div>
              </el-tooltip>
            </div>
          </div>
        </div>
        <div class="box box-enter">
          <div class="title">
            <span class="name">快捷入口</span>
          </div>
          <div class="deduction-min">
            <div class="quick" @click="handlePage(1)">
              <img src="../assets/images/channel.png" alt="">
              <div class="name">常用通道</div>
            </div>
            <div class="quick" @click="handlePage(2)">
              <img src="../assets/images/account.png" alt="">
              <div class="name">账号管理</div>
            </div>
            <div class="quick" @click="handlePage(3)">
              <img src="../assets/images/trade-list.png" alt="">
              <div class="name">订单管理</div>
            </div>
            <div class="quick" @click="handlePage(4)">
              <img src="../assets/images/trade.png" alt="">
              <div class="name">四方流水</div>
            </div>
<!--            <div class="quick" @click="handlePage(1)">-->
<!--              <img src="../assets/images/channel.png" alt="">-->
<!--              <div class="name">常用通道</div>-->
<!--            </div>-->
<!--            <div class="quick" @click="handlePage(2)">-->
<!--              <img src="../assets/images/account.png" alt="">-->
<!--              <div class="name">账号管理</div>-->
<!--            </div>-->
<!--            <div class="quick" @click="handlePage(3)">-->
<!--              <img src="../assets/images/trade-list.png" alt="">-->
<!--              <div class="name">订单管理</div>-->
<!--            </div>-->
<!--            <div class="quick" @click="handlePage(4)">-->
<!--              <img src="../assets/images/trade.png" alt="">-->
<!--              <div class="name">四方流水</div>-->
<!--            </div>-->
          </div>
        </div>
        <div class="box box-line">
          <div class="title">
            <span class="name">数据概述</span>
          </div>
          <div class="time-list">
            <div @click="handleDay(item.day)" class="time-item" :class="{active: weekDay == item.day}" v-for="(item,index) in weekArr" :key="index">
              <div class="time-week">周{{item.week == 1 ? '一' : item.week == 2 ? '二' : item.week == 3 ? '三' : item.week == 4 ? '四' : item.week == 5 ? '五' : item.week == 6 ? '六' : '日'}}</div>
              <div class="time-day">{{item.day}}</div>
            </div>
          </div>
          <div class="chart">
            <div id="myChart" :style="{width: '100%', height: '100%'}"></div>
          </div>
        </div>
      </div>
      <div class="box box-right">
        <div class="title">
          <span class="name">近期公告</span>
        </div>
        <div class="notice-list">
          <div class="notice-item" v-for="(item, idx) in list" :key="idx">
            <div class="date-time">{{ item.day }}</div>
            <div class="item-content" :style="idx == 0 ? 'color: #F5686F;font-weight: 700;' : ''">{{ item.noticeTitle }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    initIndexData,
    noticeList
  } from "@/api/merchant/index";
  import {
    listCapitalRecord
  } from "@/api/merchant/capitalRecord";
  import { formatTime } from '@/utils';
  import { mapGetters } from 'vuex'
  import store from '@/store'
  export default {
    name: "Index",
    computed: {
      ...mapGetters([
        'sidebar'
      ])
    },
    data() {
      return {
        //统计的数据
        statisticalData: {},
        effectState:true,
        //日期
        weekArr:[],
        minWeekArr:[{week:'',day:''},{week:'',day:''},{week:'',day:''}],
        weekDay:'',
        week:'',
        options: [{
          day: '',
          week: ''
        }, {
          day: '',
          week: ''
        }],
        value: '',
        capitalRecordList:{
          fee1:'',
          fee2:'',
          fee3:'',
          createTime1:'',
          createTime2:'',
          createTime3:''
        },
        cssWidth:document.documentElement.clientWidth,
        cssHeight:document.documentElement.clientHeight,
        list: [],
        dateStr: formatTime(new Date().getTime(), 'Y-M-D')
      };
    },
    created() {
      this.initData();
      this.makeDate();
      store.commit('SET_CHOOSE_USERID', 0);
      store.commit('SET_CHOOSE_USER_NAME', '');
    },
    methods: {
      goTarget(href) {
        window.open(href, "_blank");
      },
      //初始化数据
      initData() {
        this.getIndexData();
        listCapitalRecord({
          pageNum: 1,
          pageSize: 10,
          type: 2
          }).then(response => {
          // this.capitalRecordList = response.rows;
          this.capitalRecordList.fee1=response.rows[0].fee;
          this.capitalRecordList.fee2=response.rows[1].fee
          this.capitalRecordList.fee3=response.rows[2].fee
          this.capitalRecordList.fee4=response.rows[3].fee
          this.capitalRecordList.createTime1=response.rows[0].createTime
          this.capitalRecordList.createTime2=response.rows[1].createTime
          this.capitalRecordList.createTime3=response.rows[2].createTime
          this.capitalRecordList.createTime4=response.rows[3].createTime
        });
        let opt = {
          pageNum: 1,
          pageSize: 10,
        }
        noticeList(opt).then(res => {
          if (res.code == 200) {
            res.rows.map(item => {
              item.day = formatTime(item.createTime.replaceAll('-', '/'), 'M/D');
            })
            this.list = [...res.rows];
          }
        })
      },
      getIndexData() {
        initIndexData(this.dateStr).then(response => {
          response.data.yesterdaySuccessRate = Number(response.data.yesterdaySuccessRate)
          response.data.yesterdayDeduction = Number(response.data.yesterdayDeduction)
          response.data.todaySuccessRate = Number(response.data.todaySuccessRate)
          response.data.wxPaySuccessRate = Number(response.data.todayWxPaySuccessRate)
          response.data.aliPaySuccessRate = Number(response.data.todayAliPaySuccessRate)
          this.statisticalData = response.data;
          this.drawLine();
        });
      },
      drawLine() {
        let that = this;
        // 基于准备好的dom，初始化echarts实例myChartTow
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // let myColumnChart = this.$echarts.init(document.getElementById('myColumnChart'))
        // let myMinChart = this.$echarts.init(document.getElementById('myMinChart'))
        // let myMimColumnChart = this.$echarts.init(document.getElementById('myMimColumnChart'))
        // 绘制图表
        myChart.setOption({
          // color: 'rgba(128, 130, 255, 0.64)',

          color: {
            type: 'linear',
            // x=0,y=1,柱子的颜色在垂直方向渐变
            x: 0,
            y: 1,
            colorStops: [
              // 0%处的颜色
              {
                offset: 0,
                color: '#83bff6',
              },
              // 50%处的颜色
              {
                offset: 0.9,
                color: '#188df0',
              },
              // 100%处的颜色
              {
                offset: 1,
                color: '#188df0',
              }
            ],
            global: false // 缺省为 false
          },
          xAxis: {
            type: 'category',
            data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
              '16', '17', '18', '19', '20', '21', '22', '23'
            ]
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: this.statisticalData.incomeMonitor ,
            type: 'bar',
            smooth: true,
            areaStyle: {},
          }],
          tooltip : {
            trigger: 'axis'
          }
        });
        // myColumnChart.setOption({
        //   xAxis: {
        //     type: 'category',
        //     data: [],
        //     show: false,
        //     splitLine:{
        //         show:false
        //     }
        //   },
        //   yAxis: {
        //     type: 'value',
        //     show: false,
        //     splitLine:{
        //         show:false
        //     }
        //   },
        //   series: [
        //     {
        //       data: [1289700, 3689200, 1938750],
        //       type: 'bar',
        //       barWidth :7,//柱图宽度
        //       barCategoryGap:'20%',
        //       itemStyle: {    // 图形的形状
        //         normal:{
        //             barBorderRadius: 4,
        //             color:function(params){
        //                 var colorlist = ['#EDEDED','#EDEDED','#00B36B'];
        //                 return colorlist[params.dataIndex];
        //             }
        //         }
        //       },
        //     },
        //   ],
        //   tooltip: {
        //       formatter: function (params) {
        //           // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
        //           let firstParams = params[0];
        //           let sndParams = params[1];
        //           return  '12月15日' + '<br>' + '+1600.35'
        //           // + firstParams.data + ' 亿千瓦<br>增长率：' + sndParams.data +' %';
        //       }
        //   },
        // });
        // myMinChart.setOption({
        //   color: 'rgba(128, 130, 255, 0.64)',
        //   xAxis: {
        //     type: 'category',
        //     boundaryGap: false,
        //     data: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15',
        //       '16', '17', '18', '19', '20', '21', '22', '23'
        //     ]
        //   },
        //   yAxis: {
        //     type: 'value'
        //   },
        //   grid: {
        //     containLabel: true //防止遮挡
        //   },
        //   series: [{
        //     data: this.statisticalData.incomeMonitor ,
        //     type: 'line',
        //     smooth: true,
        //     areaStyle: {},
        //   }],
        //   tooltip : {
        //     trigger: 'axis'
        //   }
        // });
        // myMimColumnChart.setOption({
        //   xAxis: {
        //     type: 'category',
        //     data: [],
        //     show: false,
        //     splitLine:{
        //         show:false
        //     }
        //   },
        //   yAxis: {
        //     type: 'value',
        //     show: false,
        //     splitLine:{
        //         show:false
        //     }
        //   },
        //   series: [
        //     {
        //       data: [1289700, 3689200, 1938750],
        //       type: 'bar',
        //       barWidth :7,//柱图宽度
        //       barCategoryGap:'20%',
        //       itemStyle: {    // 图形的形状
        //         normal:{
        //             barBorderRadius: 4,
        //             color:function(params){
        //                 var colorlist = ['#EDEDED','#EDEDED','#00B36B'];
        //                 return colorlist[params.dataIndex];
        //             }
        //         }
        //       },
        //     },
        //   ],
        //   tooltip: {
        //       formatter: function (params) {
        //           // console.log(params); // 当我们想要自定义提示框内容时，可以先将鼠标悬浮的数据打印出来，然后根据需求提取出来即可
        //           let firstParams = params[0];
        //           let sndParams = params[1];
        //           return  '12月15日' + '<br>' + '+1600.35'
        //           // + firstParams.data + ' 亿千瓦<br>增长率：' + sndParams.data +' %';
        //       }
        //   },
        // });
      },
      handleCapitalRecord(){
         this.$router.push({path:'/capitalRecord/list',query: {value:'2'}})
      },
      handelffect(){
        this.effectState = !this.effectState
        this.drawLine()
      },
      handleDay(day){
        if (this.weekDay != day) {
          // console.log(day)
          let date = new Date(new Date().setDate(day)).getTime()
          this.dateStr = formatTime(date, 'Y-M-D')
          this.weekDay = day
          this.getIndexData();
        }
      },
      handlePage(e){
         if (e == 1) {
           this.$router.push({path:'/channel/list'})
         }else if(e == 2){
           this.$router.push({path:'/account/list'})
         }else if(e == 3){
           this.$router.push({path:'/trade/list'})
         }else if(e == 4){
           this.$router.push({path:'/trade/group'})
         }
      },
      makeDate() {
          var date = new Date();
          var month = date.getMonth();
          var week = date.getDay();
          var month = month + 1;
          var day = date.getDate();
          var timeDay = date.getTime()
          // console.log(timeDay.getDate());
          // week：周几，day：几号
          var weekArr = [{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''},{week:'',day:''}];
          // 本周内今天的前几天的数量
          var leftNum = 6;
          // 本周内今天的前几天
          for(var i=0; i<leftNum; i++){
              weekArr[i].week = Math.abs(week + (1+i) < 7 ? week + (1+i) : week + (1+i) - 7);
              weekArr[i].day = new Date(timeDay-(6-i)*1000*60*60*24).getDate();
          }
          this.options[0].week =week
          this.options[0].day =day
          this.options[1].week =weekArr[5].week
          this.options[1].day =weekArr[5].day

          this.minWeekArr[0].week =weekArr[4].week
          this.minWeekArr[0].day =weekArr[4].day
          this.minWeekArr[1].week =weekArr[5].week
          this.minWeekArr[1].day =weekArr[5].day
          this.minWeekArr[2].week =week
          this.minWeekArr[2].day =day
          // 今天
          weekArr[6].week = week;
          weekArr[6].day = day;
          this.weekArr = weekArr
          this.weekDay = day
          this.week = week
      }
    },
  };

</script>

<style scoped lang="scss">
.home {
  background: #f4f4f4;
  padding: 16px;
  min-height: 100%;
  overflow-y: auto;
  .box {
    padding: 20px 20px 36px;
    background: #fff;
    border-radius: 10px;
  }
  .box-top {
    display: flex;
    align-items: center;
    background: #fff;
    height: 76px;
    padding: 0 30px;
    img {
      width: 76px;
      height: 76px;
      margin-right: 10px;
    }
    >div {
      font-size: 20px;
      color: #262626;
      line-height: 76px;
      font-weight: bold;
    }
  }
  .box-bottom {
    display: flex;
    align-items: stretch;
    margin-top: 16px;
    .title {
      position: relative;
      padding-left: 10px;
      .name {
        color: #262626;
        font-weight: 500;
        font-size: 16px;
      }
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 18px;
        margin-top: -9px;
        background: #256ee7;
        border-radius: 5px;
      }
    }
    .box-left {
      flex: 1;
      .box-enter {
        margin-top: 16px;
        .deduction-min {
          display: flex;
          align-items: center;
          margin-top: 36px;
          .quick {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            img {
              width: 66px;
              height: 66px;
              cursor: pointer;
            }
            .name {
              font-size: 16px;
              font-weight: 700;
              color: #252525;
              cursor: pointer;
            }
          }
        }
      }
      .box-line {
        margin-top: 16px;
        .time-list{
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          .time-item{
            display: flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 36px;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
            //color: #ADABAB;
            box-sizing: border-box;
            line-height: 18px;
            cursor: pointer;
            border: 2px solid #ADABAB;
            &.active {
              color:#fff;
              background: #256ee7;
              border-color: #256ee7;
            }
          }
          .time-week{
            margin-right: 6px;
          }
        }
        .chart{
          width: 100%;
          height: 300px;
        }
      }
      .box-row {
        display: flex;
        align-items: stretch;
        height: 238px;
        .box-deduction {
          width: 458px;
          .deduction-min {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            padding-top: 40px;
            width: 100%;
            .icon {
              width: 80px;
            }
            .deduction-right {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              .deduction-top-min {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                font-size: 20px;
                div:nth-child(2) {
                  font-size: 40px;
                }
              }
              .see-deduction-min {
                width: 200px;
                height: 40px;
                background: #256ee7;
                border-radius: 9px;
                border: 1px solid #256ee7;
                color: #fff;
                font-size: 18px;
                text-align: center;
                line-height: 40px;
                box-sizing: border-box;
                margin-top: 25px;
                cursor: pointer;
              }
            }
          }
        }
        .box-middle {
          display: flex;
          flex-direction: column;
          width: 258px;
          margin-left: 16px;
          .top {
            flex: 1;
          }
          .line {
            width: 100%;
            height: 1px;
            border-bottom: 1px solid #dedede;
            margin: 10px 0;
          }
          .bottom {
            flex: 1;
          }
        }
        .box-today {
          flex: 1;
          margin-left: 16px;
        }
        .box-yesterday {
          flex: 1;
          margin-left: 16px;
        }
      }
    }
    .box-right {
      width: 354px;
      margin-left: 16px;
      background: #fff;
      .notice-list {
        padding: 0 20px;
        .notice-item {
          display: flex;
          align-items: center;
          overflow: hidden;
          height: 30px;
          .date-time {
            color: #999;
            margin-right: 10px;
          }
          .item-content {
            flex: 1;
            color: #252525;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
